import React, { Component } from 'react'
import { NavBar } from 'antd-mobile';
import SearchInput from "../searchInput/SearchInput";
import "./Category.css";
import myaxios from "../../utils/myaxios";
import { withRouter } from "react-router-dom";
import axios from "axios";
class Category extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;//频繁切换，取消请求
        this.source = CancelToken.source();
    }
    state = {
        categories: [],//返回的菜单数据
        select_index: 0,//当前选中左边的菜单
        categories_content: []//右边菜单渲染的内容
    }
    componentDidMount() {
        let categories_cache = localStorage.getItem("categories_cache");
        //如果本地缓存不会空
        if (categories_cache && JSON.parse(categories_cache).date) {
            //判断本地缓存是否过期
            //当前时间
            let current_time = Date.now();
            //本地时间
            let storage_time = JSON.parse(categories_cache).date;
            //一小时过期
            if (current_time - storage_time > 60 * 60 * 1000) {
                this.getCategories();
            } else {
                //缓存没有过期
                //第二个参数 代表是否已经缓存
                this.setCategories(JSON.parse(categories_cache).categories, true)
            }
        } else {
            this.getCategories();
        }
    }
    componentWillUnmount() {
        this.source.cancel("取消分类菜单的请求")
    }
    //获取分类菜单的数据
    getCategories = (params) => {
        myaxios.get("categories", {
            cancelToken: this.source.token
        }).then((res) => {
            // console.log(res)

            this.setCategories(res)
        }).catch((err) => {
            console.log(err)
        })
    }
    //设置分类菜单的数据
    setCategories = (res, is_storaged) => {
        let categories_cache = {};
        if (!is_storaged) {
            categories_cache = {
                date: Date.now(),
                categories: res
            }
            //缓存到本地中
            localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        }
        this.setState({
            categories: res,
            categories_content: res[0].children
        });


    }

    //左边分类菜单点击的时候触发
    handleItemClick = (e) => {
        //获取点击选中的项
        let select_index = parseInt(e.target.getAttribute("data-index"));
        console.log(select_index);
        this.setState({
            select_index: select_index,
            categories_content: this.state.categories[select_index].children
        })
    }
    //右边图片点击的时候触发
    handleProductItemClick = (e) => {
        let cid = parseInt(e.target.getAttribute("data-index"));
        // console.log(cat_id);
        this.props.history.push("/goodList?cid=" + cid)
    }

    render() {
        return (
            <div className="yg-category">
                {/* 首页导航条的开始 */}
                <div className="yg-category-nav">
                    <NavBar className="category-nav">商品分类</NavBar>
                </div>
                {/* 首页导航条的结束 */}
                {/* 首页搜索框的开始 */}
                <div className="yg-category-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 首页搜索框的结束 */}
                {/* 分类菜单的开始 */}
                <div className="yg-category-content">
                    <div className="content-left" onClick={this.handleItemClick}>
                        {this.state.categories && this.state.categories.map((val, index) => {
                            return (
                                <div className={this.state.select_index === index ? "active content-left-item" : "content-left-item"} key={val.cat_id} data-index={index}>
                                    {val.cat_name}
                                </div>
                            )
                        }
                        )}
                    </div>
                    <div className="content-right">
                        {this.state.categories_content && this.state.categories_content.map((v, i) => {
                            return (
                                <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级菜单的开始 */}
                                    <div className="right-item-title">
                                        {"/"}
                                        {v.cat_name}
                                        {"/"}
                                    </div>
                                    {/* 二级菜单的结束 */}
                                    {/* 产品列表的开始 */}
                                    <div className="product-list">
                                        {v.children && v.children.map((val) => {
                                            return (
                                                <div className="product-list-item" data-index={val.cat_id} key={val.cat_id} onClick={this.handleProductItemClick}>
                                                    <div className="imageWrapper">
                                                        <img src={val.cat_icon} alt="" data-index={val.cat_id} />
                                                    </div>
                                                    <div className="item-title">
                                                        {val.cat_name}
                                                    </div>
                                                </div>
                                            )
                                        })
                                        }
                                    </div>
                                    {/* 产品列表的结束 */}
                                </div>
                            )
                        })}
                    </div>
                </div>
                {/* 分类菜单的结束 */}
            </div>
        )
    }
}
export default withRouter(Category);